<template>
  <div>
    <h1>reactive——监视对象类型</h1>
    姓名：{{ person.name }} <br />
    年龄：{{ person.age }} <br />
    car1: {{ person.car.car1 }} <br />
    car2: {{ person.car.car2 }} <br />
    <button @click="changeName">更改姓名</button> &nbsp; &nbsp;
    <button @click="changeAge">更改Age</button>&nbsp; &nbsp;
    <button @click="changePerson">更改Person</button>&nbsp; &nbsp;
    <button @click="changeCar1">更改Car1</button>&nbsp; &nbsp;
    <button @click="changeCar2">更改Car2</button>&nbsp; &nbsp;
    <button @click="changeCar">更改整个Car</button>&nbsp; &nbsp;
  </div>
</template>

<script lang="ts" setup name="UseWatchObjectType">
import { reactive, watch } from "vue";
let person = reactive({ name: "张三", age: 18 , car:{car1:'宝马',car2:'奔驰'}});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}

function changePerson() {
  person = { name: "李四", age: 10, car:{car1:'雅迪',car2:'爱码'}}; // 这种方式也可以了，不知道为什么 
  //Object.assign(person,{ name: "李四", age: 10, car:{car1:'雅迪',car2:'爱码'}};
}

function changeCar(){
  person.car={car1:'改车1',car2:'改车2'}
}
function changeCar1(){
  person.car.car1='car1Change'
}
function changeCar2(){
  person.car.car2='car2Change'
}

// watch(
//   person,
//   (newValue, oldValue) => {
//     console.log("Person更改了,新值为", newValue, "老值为：", oldValue);
//   }
// );

watch(()=>person.car,(newValue,oldValue)=>{
  console.log("Car的值更改了",newValue,oldValue)
},{deep:true});


//只监视name和age的变更
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
  console.log('Name或Age变更',newValue,oldValue)
  let [myName,myAge] =newValue;
  console.log('新的Name',myName);
  console.log('新的Age',myAge);
})




</script>
